<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>
            阳光成单系统
        </title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="format-detection" content="telephone=no">
        <link rel="stylesheet" href="./css/x-admin.css" media="all">
        <script src="./js/jquery.min.js"></script>
    </head>
    <body>
        <div class="x-nav">
            <span class="layui-breadcrumb">
              <a><cite>首页</cite></a>
              <a><cite>会员管理</cite></a>
              <a><cite>问题/资讯列表</cite></a>
            </span>
            <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"  href="javascript:location.replace(location.href);" title="刷新"><i class="layui-icon" style="line-height:30px">ဂ</i></a>
        </div>
        <div class="x-body">
        <div class="demoTable  x-center"">    
				 设计师名称：
				  <div class="layui-inline">
				    <input class="layui-input" name="par1" placeholder="请输入标题关键字" id="par1" autocomplete="off">
				  </div>
				 设计师排位：
				  <!-- <div class="layui-inline">
				    <input class="layui-input" name="par2" placeholder="请输入新闻内容关键字" id="par2" autocomplete="off">
				  </div> -->
				  <div class="layui-inline layui-form x-center" style="margin-top: 15px; margin-bottom: 15px">
                    <div class="layui-input-inline" style="width:120px;text-align: left">
                        <select  name="par2" id="par2" lay-verify="required" lay-filter="informationcategory" >
                          <option value="">--请选择--</option>
                          <option value="金牌设计师">金牌设计师</option>
                          <option value="银牌设计师">银牌设计师</option>
                          <option value="铜牌设计师">铜牌设计师</option>
                          
                        </select>
                    </div>
                  </div> 
	
				  <button class="layui-btn" data-type="reload">搜索</button>
				</div>
</div>
          <!--   <form class="layui-form x-center" action="" style="width:800px">
                <div class="layui-form-pane" style="margin-top: 15px;">
                  <div class="layui-form-item">
                    <label class="layui-form-label">日期范围</label>
                    <div class="layui-input-inline">
                      <input class="layui-input" placeholder="开始日" id="LAY_demorange_s">
                    </div>
                    <div class="layui-input-inline">
                      <input class="layui-input" placeholder="截止日" id="LAY_demorange_e">
                    </div>
                    <div class="layui-input-inline">
                      <input type="text" name="username" id="username"  placeholder="标题" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-input-inline" style="width:80px">
                        <button class="layui-btn"  lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
                    </div>
                  </div>
                </div> 
            </form> -->
            <xblock><button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon">&#xe640;</i>批量删除</button>
            <button class="layui-btn" onclick="question_add()"><i class="layui-icon">&#xe608;</i>添加</button><span class="x-right" style="line-height:40px"></span></xblock>
            <table class="layui-table" lay-filter='test' id="demo">
              
            </table>

          <div  id="dd1"   style="display:none">
            <form class="layui-form" lay-filter="addM1" id="ff1">
                <div class="layui-form-item">
                    <label for="username" class="layui-form-label">
                        <span class="x-red">*</span>设计师名称
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="name" name="name" required="" 
                        autocomplete="off" onblur="checkA()" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">
                        <span class="x-red">*</span><span class="x-red" id="t1"></span>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="phone" class="layui-form-label">
                        <span class="x-red">*</span>设计师排位
                    </label>
                   <!--  <div class="layui-input-inline">
                        <input type="text" id="pw" name="pw" required="" 
                        autocomplete="off" onblur="checkB()" class="layui-input">
                    </div> -->
                     <div class="layui-form x-center" style="margin-top: 15px;">
                    <div class="layui-input-inline" onmouseout="checkB()" style="width:120px;text-align: left">
                        <select  name="pw" id="pw" lay-verify="required" lay-filter="informationcategory" >
                          <option value="">--请选择--</option>
                          <option value="金牌设计师">金牌设计师</option>
                          <option value="银牌设计师">银牌设计师</option>
                          <option value="铜牌设计师">铜牌设计师</option>
                          
                        </select>
                    </div>
                </div>  
                    <div class="layui-form-mid layui-word-aux">
                        <span class="x-red">*</span><span class="x-red" id="t2"></span>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="L_email" class="layui-form-label">
                        <span class="x-red" >*</span>设计师头像
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="pic" name="pic" required="" 
                        autocomplete="off" onblur="checkC()" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">
                        <span class="x-red">*</span>
                    </div>
                    <button type="button" class="layui-btn" id="test1">
						  <i class="layui-icon">&#xe67c;</i>上传图片
						</button>
                </div>
                <!-- <div class="layui-form-item">
                    <label for="role" class="layui-form-label">
                        <span class="x-red">*</span>邮箱
                    </label>
                    <div class="layui-input-inline">
                      <select name="role">
                        <option value="">请选择角色</option>
                        <option value="超级管理员">超级管理员</option>
                        <option value="编辑人员">编辑人员</option>
                        <option value="问题维护">问题维护</option>
                      </select>
                    </div>
                </div> -->
                <!-- <div class="layui-form-item">
                    <label for="L_repass" class="layui-form-label">
                        <span class="x-red">*</span>确认密码
                    </label>
                    <div class="layui-input-inline">
                        <input type="password" id="L_repass" name="repass" required="" lay-verify="repass"
                        autocomplete="off" class="layui-input">
                    </div>
                </div> -->
                <div class="layui-form-item">
                    <label for="L_repass" class="layui-form-label">
                    </label>
                    <input class="layui-btn" value="增加" id="addbtn">
                </div>
            </form>
        </div>
        <div  id="dd2"   style="display:none">
            <form class="layui-form" lay-filter="updateM1" >
             <div class="layui-form-item">
                    <label for="username" class="layui-form-label">
                        <span class="x-red">*</span>设计师编号
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="id1" name="id" required="" 
                        autocomplete="off" readonly="sreadonly" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">
                        <span class="x-red">*</span>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="username" class="layui-form-label">
                        <span class="x-red">*</span>设计师名称
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="name1" name="name"  required="" 
                        autocomplete="off" onblur="checkD()" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">
                        <span class="x-red">*</span><span class="x-red" id="t3"></span>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="phone" class="layui-form-label">
                        <span class="x-red">*</span>设计师排位
                    </label>
                   <!--  <div class="layui-input-inline">
                        <input type="text" id="pw1" name="pw" required="" 
                        autocomplete="off" class="layui-input">
                    </div> -->
                  <div class="layui-form x-center" style="margin-top: 15px;">
                    <div class="layui-input-inline" onmouseout="checkE()" style="width:120px;text-align: left">
                        <select  name="pw" id="pw1" lay-verify="required" lay-filter="informationcategory" >
                          <option value="">--请选择--</option>
                          <option value="金牌设计师">金牌设计师</option>
                          <option value="银牌设计师">银牌设计师</option>
                          <option value="铜牌设计师">铜牌设计师</option>
                          
                        </select>
                    </div>
                </div>  
                    <div class="layui-form-mid layui-word-aux">
                        <span class="x-red">*</span><span class="x-red" id="t4"></span>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="L_email" class="layui-form-label">
                        <span class="x-red">*</span>设计师头像
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="pic1" name="pic" required="" 
                        autocomplete="off" onblur="checkF()" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">
                        <span class="x-red">*</span>
                    </div>
                    <button type="button" class="layui-btn" id="test2">
						  <i class="layui-icon">&#xe67c;</i>上传图片
						</button>
                </div>
                <!-- <div class="layui-form-item">
                    <label for="L_repass" class="layui-form-label">
                        <span class="x-red">*</span>确认密码
                    </label>
                    <div class="layui-input-inline">
                        <input type="password" id="L_repass" name="repass" required="" lay-verify="repass"
                        autocomplete="off" class="layui-input">
                    </div> 
                </div> -->
                <div class="layui-form-item">
                    <label for="L_repass" class="layui-form-label">
                    </label>
                    <input class="layui-btn" value="修改" id="updatebtn">
                </div>
            </form>
        </div>
            <div id="page"></div>
        </div>
        <script src="./lib/layui/layui.js" charset="utf-8"></script>
        <script src="./js/x-layui.js" charset="utf-8"></script>
        <script type="text/html" id="titleTpl">
              <img src="../{{d.pic}}" onmousemove="hoverOpenImg(this)" class="layui-table-link" />
	     </script>
        <script>
            layui.use('table', function(){
		  var table = layui.table;
		  //第一个实例
		  table.render({
		    elem: '#demo'
		    ,height: 412
		    ,url: '../DesignerServlet?oid=2' //数据接口
		    ,page: true //开启分页
		    ,cols: [[ //表头
		    	{type:'checkbox', fixed: 'left'}
		      ,{field: 'id', title: '编号', width:80, sort: true, fixed: 'left'}
		      ,{field: 'name', title: '设计师名称', sort: true,width:150}
		      ,{field: 'pw', title: '设计师排位', sort: true,width:150}
		      ,{field: 'pic', title: '设计师头像',sort: true, width:150,templet: '#titleTpl'}
		      ,{fixed: 'right', width:250, align:'center', toolbar: '#barDemo'}
		
		    ]]
		    ,id:"showAll"
		  });
		   var $ = layui.$, active = {
		    reload: function(){
		      var par1 = $('#par1');  //jquery的写法   根据id获取名称的对象
		      var par2 = $('#par2');  //jquery的写法   根据id获取品牌的对象
		    
		      //执行重载
		      table.reload('showAll', {  //showAll是上边查询代码的id
		        page: {
		          curr: 1 //重新从第 1 页开始
		        }
		   , method: 'POST'
		        ,where: {
		         /*  key: {
		            id: demoReload1.val()
		          } */
		          name: par1.val()   //获取名称文本框的值
		          ,pw:par2.val()  //获取品牌文本框的值
		        }
		      });
		    }
		  };
		   $('.demoTable .layui-btn').on('click', function(){
		    var type = $(this).data('type');
		    active[type] ? active[type].call(this) : '';
		  });
		});
/*   <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a> */
</script>
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
  
</script>
<script type="text/javascript">
layui.use(["table","jquery"],function(){
  var table=layui.table;
  var $=layui.jquery;
   table.on('tool(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
  var data = obj.data; //获得当前行数据
  var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
  var tr = obj.tr; //获得当前行 tr 的DOM对象
 
  if(layEvent === 'detail'){ //查看
    
  } else if(layEvent === 'del'){ //删除
      layer.open({
            type : 1,
            content : '<div style="padding: 20px 80px;">确定删除记录?</div>',
            btn : [ '确定', '取消' ],
            yes : function(index, layero) {
                $.ajax({
                    url : "../DesignerServlet?oid=3",
                    data : {
                        "id" : data.id
                    },
                    dataType : "text",
                    success : function(r) {
                        if(r>0){
                            layer.msg("删除成功！");
                           obj.del();
                           layer.close(index);
                           table.reload("demo");
                        }else{
                            layer.msg("删除失败！");
                        }
                    },
                    error : function() {
                    }
                });
            }
        });

  } else if(layEvent === 'edit'){ //编辑
 var form=layui.form;//alert(data);
  	        form.val("updateM1",data);
				layer.open({
	            type : 1,
	            title:'修改页面',
	            content : $("#dd2"),
	            area: ['500px', '500px']
	        	});
  }
});
});
  
</script>
<script>
//验证
function checkA(){
    var name = document.getElementById("name").value;
    if(name!=""){
            document.getElementById("name").style="";
    	    document.getElementById("t1").innerHTML = "";
    		return true;
    }else{
            document.getElementById("t1").innerHTML = "必填,不能为空";
    		document.getElementById("name").style="border:1px solid red";
    		return false;
    }
}
function checkB(){
    var pw = document.getElementById("pw").value;
    if(pw!=""){
            document.getElementById("pw").style="";
    	    document.getElementById("t2").innerHTML = "";
    		return true;
    }else{
            document.getElementById("t2").innerHTML = "必填,不能为空";
    		document.getElementById("pw").style="border:1px solid red";
    		return false;
    }
}
function checkC(){
    var pic = document.getElementById("pic").value;
    if(pic!=""){
            document.getElementById("pic").style="";
    	   /*  document.getElementById("t1").innerHTML = ""; */
    		return true;
    }else{
            /* document.getElementById("t1").innerHTML = "必填,不能为空"; */
    		document.getElementById("pic").style="border:1px solid red";
    		return false;
    }
}
function checkE(){
    var pw1 = document.getElementById("pw1").value;
    if(pw1!=""){
            document.getElementById("pw1").style="";
    	    document.getElementById("t4").innerHTML = "";
    		return true;
    }else{
            document.getElementById("t4").innerHTML = "必填,不能为空";
    		document.getElementById("pw1").style="border:1px solid red";
    		return false;
    }
}
function checkD(){
    var name1 = document.getElementById("name1").value;
    if(name1!=""){
            document.getElementById("name1").style="";
    	    document.getElementById("t3").innerHTML = "";
    		return true;
    }else{
            document.getElementById("t3").innerHTML = "必填,不能为空";
    		document.getElementById("name1").style="border:1px solid red";
    		return false;
    }
}
function checkF(){
    var pic1 = document.getElementById("pic1").value;
    if(pic1!=""){
            document.getElementById("pic1").style="";
    	   /*  document.getElementById("t1").innerHTML = ""; */
    		return true;
    }else{
            /* document.getElementById("t1").innerHTML = "必填,不能为空"; */
    		document.getElementById("pic1").style="border:1px solid red";
    		return false;
    }
}

function question_add(){
layer.open({
                  type:1,
                  content:$("#dd1"),
                  area:['500px','500px']
                });

}
//用ajax发送请求
$(function(){
    $("#addbtn").click(function(){
    //用js获取文本框得值
    var name = document.getElementById("name").value;
    var pw = document.getElementById("pw").value;
    var pic = document.getElementById("pic").value;
  
  if(!(checkA()&checkB()&checkC())){
        return;  
  }
    //var ext1 = $("#ext1").val();
    
    //alert(title+","+content+","+f_ncid+","+ext1);
		$.post("../DesignerServlet?oid=5",{
		name:name,
		pw:pw,
		pic:pic
		},function(r){
		if(r>0){
		 layer.msg("添加成功！");
		  window.setTimeout(function(){ 
		 window.location.href="javascript:location.replace(location.href)";
		 },600); 
		}else{
		 layer.msg("添加失败！");
		  window.setTimeout(function(){ 
         window.location.href="javascript:location.replace(location.href)";
          },600); 
	    }
		});
		
		
		});	
//修改
$("#updatebtn").click(function(){
    var id = document.getElementById("id1").value;
    var name = document.getElementById("name1").value;
    var pw = document.getElementById("pw1").value;
    var pic = document.getElementById("pic1").value;
    //var ext1 = $("#ext1").val();
 //alert(id+","+name+","+caizhi+","+price+","+pic0+","+f_pcid+","+ext1);
    $.post("../DesignerServlet?oid=6",{
        id:id,
        name:name,
		pw:pw,
		pic:pic
    },function(r){
    if(r>0){
		 layer.msg("修改成功！");
		  window.setTimeout(function(){ 
		 window.location.href="javascript:location.replace(location.href)";
		 },600); 
		}else{
		 layer.msg("修改失败！");
		  window.setTimeout(function(){ 
         window.location.href="javascript:location.replace(location.href)";
          },600); 
	    }
    });
    });
    });

//批量删除
function delAll(){
var arr = layui.table.checkStatus('showAll').data; //获取当前行的数据object类型
//alert(arr[0].id);   取值案例
var temp = ""; 
for(var i=0;i<arr.length;i++){//用javascript的for/in循环遍历对象的属性
    temp +=arr[i].id+",";
}
//alert(temp);//已经得到选中行的所有id
   layer.open({
            type : 1,
            content : '<div style="padding: 20px 80px;">确定删除记录?</div>',
            btn : [ '确定', '取消' ],
            yes : function(index, layero) {
                $.ajax({
                    url : "../DesignerServlet?oid=4",//数据接口
                    data : {
                        "temp" : temp
                    },
                    dataType : "text",
                    success : function(r) {
                        if(r>0){
                            layer.msg("删除成功！");
                             window.setTimeout(function(){
                         window.location.href="javascript:location.replace(location.href)";
                          },600); 
                        }else{
                            layer.msg("删除失败！");
                             window.setTimeout(function(){
                         window.location.href="javascript:location.replace(location.href)";
                          },600);
                        }
                    },
                    error : function() {
                    }
                });
            }
        }); 
        }
</script>
<script>
//图片上传
layui.use('upload', function(){
  var upload = layui.upload;
   
  //执行实例
  var uploadInst = upload.render({
    elem: '#test1' //绑定元素
    ,url: '../DesignerServlet?oid=7' //上传接口
    ,done: function(res){
      //上传完毕回调
      
      layer.msg(res.msg);
      //上传文件成功后将路径填写到文本框内
      document.getElementById("pic").value=res.data;
      
    }
    ,error: function(){
      //请求异常回调
    }
  });
});
//图片上传
layui.use('upload', function(){
  var upload = layui.upload;
   
  //执行实例
  var uploadInst = upload.render({
    elem: '#test2' //绑定元素
    ,url: '../DesignerServlet?oid=7' //上传接口
    ,done: function(res){
      //上传完毕回调
      
      layer.msg(res.msg);
      //上传文件成功后将路径填写到文本框内
      document.getElementById("pic1").value=res.data;
      
    }
    ,error: function(){
      //请求异常回调
    }
  });
});
</script>
<script>
function hoverOpenImg(){
        var img_show = null; // tips提示
        $('td img').hover(function(){
            //alert($(this).attr('src'));
            var img = "<img class='img_msg' src='"+$(this).attr('src')+"' style='width:200px;' />";
            img_show = layer.tips(img, this,{
                tips:[2, 'rgba(50,50,50,.10)']
                ,area: ['220px']
            });
        },function(){
            layer.close(img_show);
        });
        $('td img').attr('style','max-width:70px');
    }
    </script>
    </body>
</html>